<!DOCTYPE html>
<html>

<head>
  <title>Socket.IO chat</title>
  <meta charset='utf-8' />
  <style>
      * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      body {
          font: 13px Helvetica, Arial;
      }

      form {
          background: #000;
          padding: 3px;
          position: fixed;
          bottom: 0;
          width: 100%;
      }

      form input {
          border: 0;
          padding: 10px;
          width: 90%;
          margin-right: 0.5%;
      }

      form button {
          width: 9%;
          background: rgb(130, 224, 255);
          border: none;
          padding: 10px;
      }

      #messages {
          list-style-type: none;
          margin: 0;
          padding: 0;
      }

      #messages li {
          padding: 5px 10px;
      }

      #messages li:nth-child(odd) {
          background: #eee;
      }
  </style>
</head>

<body>
<!-- 消息列表 -->
<ul id='messages'></ul>

<!-- 发送消息的表单 -->
<form action=''>
  <input id='m' autocomplete='off' />
  <button>Send</button>
</form>

<script src='https://cdn.bootcdn.net/ajax/libs/socket.io/4.1.3/socket.io.js'></script>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'></script>
<script>
  const socket = io('http://toutiao.itheima.net', {
    query: {
      token: '39605c7e-0758-4665-892c-f704a824a5dc'
    },
    transports: ['websocket']
  })

  socket.on('connect', () => {
    console.log('连接成功')

    $('#messages').append('<li>连接成功</li>')
  })

  $('form').submit((e) => {
    e.preventDefault() // 阻止表单默认提交行为
    const msg = $('#m').val().trim()
    $('#messages').append(`<li>${msg}</li>`)
    socket.emit('message', {
      msg,
      timestamp: Date.now()
    })
    $('#m').val('')
  })

  socket.on('message', (data) => {
    console.log(data)
    $('#messages').append(`<li>${data.msg}</li>`)
  })
</script>
</body>

</html>
